<template>
    <el-dialog
        v-model="userAddOrUpdateDialogVisible"
        :title="title"
        width="30%"
        align-center
        :show-close="false"
        :close-on-click-modal="false"
    >
        <div class="formContainer">
            <el-form :model="userDataForm" :rules="userRules" ref="userDataFormRef">
                <el-form-item label="账号" label-width="20%" prop="userAccount">
                    <el-input v-model="userDataForm.userAccount" placeholder="账号" clearable />
                </el-form-item>
                <el-form-item label="昵称" label-width="20%" prop="userNickName">
                    <el-input v-model="userDataForm.userNickName" placeholder="昵称" clearable />
                </el-form-item>
                <el-form-item label="密码" label-width="20%" prop="userPassword">
                    <el-input v-model="userDataForm.userPassword" placeholder="密码" clearable :disabled="userDataForm.id !== ''"/>
                </el-form-item>
                <el-form-item label="手机号" label-width="20%" prop="userPhone">
                    <el-input v-model="userDataForm.userPhone" placeholder="手机号" clearable />
                </el-form-item>
                <el-form-item label="邮箱" label-width="20%" prop="userEmail">
                    <el-input v-model="userDataForm.userEmail" placeholder="邮箱" clearable />
                </el-form-item>
                <el-form-item label="gitee主页" label-width="20%" prop="giteePath">
                    <el-input v-model="userDataForm.giteePath" placeholder="gitee主页" clearable />
                </el-form-item>
                <el-form-item label="github主页" label-width="20%" prop="githubPath">
                    <el-input v-model="userDataForm.githubPath" placeholder="github主页" clearable />
                </el-form-item>
                <el-form-item label="QQ" label-width="20%" prop="qqNum">
                    <el-input v-model="userDataForm.qqNum" placeholder="QQ" clearable />
                </el-form-item>
                <el-form-item label="微信" label-width="20%" prop="wechatNum">
                    <el-input v-model="userDataForm.wechatNum" placeholder="微信" clearable />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancelDialog()">取 消</el-button>
                <el-button type="primary" :loading="saveLoading" @click="submitDialog(userDataFormRef)">
                    提交
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup name="UserAddOrUpdateDialog" lang="ts">
import {userInfoCreate, userInfoQuery, userInfoUpdate} from "@/request/user";
import {ElNotification, FormInstance} from "element-plus";
import {computed, defineProps, ref} from "vue";
import {useUserInfoStore} from "@/stores/userInfo/userInfo";

let props = defineProps(['title', 'userDataForm']);

let title = computed(() => {return props['title']});
let userDataForm = computed(() => {return props['userDataForm']});

let userRules = ref({
    userAccount: [{ required: true, message: '账号不能为空', trigger: 'blur' }],
    userNickName: [{ required: true, message: '昵称不能为空', trigger: 'blur' }],
    userPassword: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
});
let saveLoading = ref(false);

let userAddOrUpdateDialogVisible = computed(() => {return useUserInfoStore().addOrUpdateDialog});
let userSearchData = computed(() => {return useUserInfoStore().userSearchData});

function cancelDialog() {
    useUserInfoStore().resetAddOrUpdateDialog(false);
}

let userDataFormRef = ref<FormInstance>();

function submitDialog(formEl: FormInstance | undefined) {
    if (!formEl) return
    saveLoading.value = true;
    formEl.validate((valid) => {
        if (valid) {
            if (userDataForm.value.id === '') {
                // 添加用户
                userInfoCreate(userDataForm.value).then(res => {
                    if (res["code"] === '200') {
                        ElNotification({
                            title: 'Success',
                            message: res["message"],
                            type: 'success'
                        });
                        userInfoQuery(userSearchData.value).then(res => {
                            useUserInfoStore().resetUserDataList(res.data);
                        })
                        useUserInfoStore().resetAddOrUpdateDialog(false);
                    }
                    saveLoading.value = false
                }).catch(res => {
                    saveLoading.value = false
                })
            } else {
                // 修改用户
                userInfoUpdate(userDataForm.value).then(res => {
                    if (res["code"] === '200') {
                        ElNotification({
                            title: 'Success',
                            message: res["message"],
                            type: 'success'
                        });
                        userInfoQuery(userSearchData.value).then(res => {
                            useUserInfoStore().resetUserDataList(res.data);
                        })
                        useUserInfoStore().resetAddOrUpdateDialog(false);
                    }
                    saveLoading.value = false
                }).catch(res => {
                    saveLoading.value = false
                })
            }
        }
    })
}
</script>

<style scoped lang="less">

</style>